<template>
  
    <div
      id="prompt-hide"
      class="prompt-hide"
    ></div>
  
</template>

<script setup>
import * as d3 from "d3";
import { onMounted } from "vue";

onMounted(() => {
  draw();
});
function draw() {
  // Define the width and height of the SVG element
  const width = document.getElementById("prompt-hide").offsetWidth * 0.9;
  const height = document.getElementById("prompt-hide").offsetHeight * 0.9;
  let promptBox = d3.select("#tooltip");
  let body = d3.select(".prompt-hide");

  const svg = body
    .append("svg")
    .attr("width", width)
    .attr("height", height);
  function drag(simulation) {
    function dragStart(e, d) {
      console.log(e.active);
      simulation.alphaTarget(0.8).restart();
      d.fx = d.x;
      d.fy = d.y;
    }
    function dragging(e, d) {
      d.fx = e.x;
      d.fy = e.y;
    }
    function dragEnd(e, d) {
      simulation.alphaTarget(0).restart();
      d.fx = null;
      d.fy = null;
    }
    return d3
      .drag()
      .on("start", dragStart)
      .on("drag", dragging)
      .on("end", dragEnd);
  }
  function ticked(links, nodesChart) {
    console.log("ticked");
    links
      .attr("x1", function (d) {
        return d.source.x;
        // console.log('line',d)
      })
      .attr("y1", function (d) {
        return d.source.y;
      })
      .attr("x2", function (d) {
        return d.target.x;
      })
      .attr("y2", function (d) {
        return d.target.y;
      });

    nodesChart.attr("transform", function (d) {
      return "translate(" + d.x + "," + d.y + ")";
    });
  }
  function addEvent(selection) {
    selection
      .on("mouseover.over", function (event, d) {
        let [posX, posY] = d3.pointer(event, body);
        promptBox
          .attr("class", "prompt-show")
          .style("top", posY - 50 + "px")
          .style("left", posX + 15 + "px")
          .html(
            // `被引次数:${d3.select(this).attr('level')}<br>论文数量:${d.length}`
            `title:${d.title}<br>引用量:${d.citation}`
          );
      })
      .on("mousemove", function (event) {
        let [posX, posY] = d3.pointer(event, body);
        promptBox
          .style("top", posY - 50 + "px")
          .style("left", posX + 15 + "px");
      })
      .on("mouseout.out", function () {
        promptBox.attr("class", "prompt-hide");
      });
    // .on('click', function (_, d) {
    //     updatePaperList(d)
    // })
  }
  d3.json("fakenodes.json").then((nodes) => {
    console.log(nodes);
    d3.json("fakeedges.json").then((links) => {
      console.log(links);
      const simulation = d3
        .forceSimulation(nodes)
        .force(
          "link",
          d3.forceLink(links).id((d) => d.id)
        )
        .force("charge", d3.forceManyBody().strength(-800))
        .force("collide", d3.forceCollide(20))
        .force("center", d3.forceCenter(width / 2, height / 2))
        .on("tick", () => ticked(edges, nodesChart));
      const line = svg.append("g").selectAll().data(links).enter().append("g");
      const edges = line
        .append("line")
        .attr("stroke", "#ccc")
        .attr("stroke-width", 1);

      const nodesChart = svg
        .append("g")
        .selectAll()
        .data(nodes)
        .join("g")
        .attr("transform", function (d, i) {
          // console.log('g-circle',d)
          return "translate(" + d.x + "," + d.y + ")";
        });
      nodesChart
        .append("circle")
        .on("mouseover", function (e, d) {
          promptBox.text(d.text);
        })
        .on("mousemove", function (e, d) {
        })
        .call(addEvent)
        .attr("r", function (d, i) {
          // 半径
          // return d.radius * 10
          return 10 + d.citation / 10;
          // return 10
        })
        .attr("fill", function (d, i) {
          return `rgba(0, 136, 136,${d.citation / 200 + 0.1})`;
        });
      nodesChart
        .append("text")
        .attr("x", -40)
        .attr("y", -5)
        .attr("dy", 10)
        .attr("font-size", 10)
        .text(function (d) {
          return d.authors.split(",")[0] + "," + d.year;
        })
        .attr("fill", "#000")
        .attr("pointer-events", "none")
        .style("user-select", "none");

      nodesChart.call(drag(simulation));
    });
  });
}
</script>

<style>
#prompt-hide {
  font: 10px sans-serif;
  width: 100%;
  height: 100%;
}

/* .prompt-hide {
  display: none;
  pointer-events: none;
} */

.prompt-show {
  display: float;
  color: black;
  position: absolute;
  border: 1px solid black;
  z-index: 100;
  background-color: white;
}
</style>
